<template>
  <div>
    <div class="w-full flex-center h-[511px] bg-[url('~/assets/images/case_banner.png')] bg-cover bg-no-repeat">
      <div class="mx-auto">
        <h1 class="banner-main-title text-[#FFFFFF] text-center">
          联合智为·服务案例
        </h1>
        <p class="text-[#FFFFFF] text-sm md:text-4xl mt-10 font-normal text-center">
          数智推动，助力提升工地监管效能
        </p>
      </div>
    </div>
    <div class="h-14 bg-[#FBFBFB] border border-[#F4F4F4]">
      <div class="w-[96%] xl:w-[1200px] h-full mx-auto flex space-x-[60px] text-[#616666] leading-[56px]">
        <div id="government" :class="{
            'text-[#222] h-full border-b-[2px] border-[#1393FF] ':
              newsCurrent === 0,
          }" @click="handleTab(0)">
          政府案例
        </div>
        <div id="project" :class="{
            'text-[#222] h-full border-b-[2px] border-[#1393FF] ':
              newsCurrent === 1,
          }" @click="handleTab(1)">
          项目案例
        </div>
      </div>
    </div>
    <div class="news-con w-[96%] mt-[60px] xl:w-[1200px] mx-auto flex flex-wrap">
      <div v-for="(item, index) in com_newsList" :key="index" @click="handleRead(item)" :class="{ 'mr-[30px]': index % 3 != 2 }" class="contents md:block w-full md:w-[30%] xl:w-[380px] mb-[30px] border border-[#EDF4FB]" :title="item.title">
        <div class="relative w-full h-24 md:h-[12vw] pb-[66.66%]">
          <img :alt="item.title" class="absolute w-full h-full" :src="item.titleImg" />
        </div>
        <div class="p-[26px]">
          <p class="text-ellipsis text-xl overflow-hidden whitespace-nowrap text-[#222]">
            {{ item.title }}
          </p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap lg:text-base">
            {{ item.about }}
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Case',
  async asyncData() {
    const { data } = await axios({
      url: 'https://erp.hnlhzw.cn/official/article/api/queryPreviewList',
      method: 'post',
      params: {
        pageNum: 1,
        pageSize: 9999,
        type: 2,
      },
    })
    return {
      newsList: data.rows.reverse(),
    }
  },
  data() {
    return {
      newsCurrent: 0,
      newsList: [],
      pageNum: 1,
      pageSize: 15,
      sort: 'GRT',
    }
  },
  head: {
    title: '智慧工地项目成功案例-联合智为',
    meta: [
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联合智为是国内领先的集平台、软件、硬件于一体的智慧住建解决方案提供商，拥有业內领先的自主核心技术、丰富的智能件设备以及成熟的解决方案。已成功服务众多政企单位和开发商。',
      },
    ],
  },
  computed: {
    com_newsList() {
      const arr = this.newsList
        .filter((item) => item.sort === this.sort)
      return arr
    }
  },
  mounted() {
    const hash = window.location.hash
    if (hash === '#project') {
      this.newsCurrent = 1
      this.sort = 'PRO'
    }
  },
  methods: {
    handleTab(index) {
      this.newsCurrent = index
      this.pageNum = 1
      this.sort = index ? 'PRO' : 'GRT'
    },
    handleRead(item) {
      this.sort === 'GRT' && this.$router.push(`/case/${item.articleId}`)
    }
  },
}
</script>

<style></style>
